Skip to content

deform2: AutocompleteInputWidget - more powerful configuration for typeahead.js#185

Closed
dairiki wants to merge 2 commits into
Pylons:deform2from
dairiki:typeahead-datasets
Closed

deform2: AutocompleteInputWidget - more powerful configuration for typeahead.js#185
dairiki wants to merge 2 commits into
Pylons:deform2from
dairiki:typeahead-datasets

Conversation

@dairiki

@dairiki dairiki commented Sep 26, 2013

Copy link
Copy Markdown
Contributor

This adds a datasets parameter to AutocompleteInputWidget which can be used as an alternatives to the values parameter for configuring the typeahead.js plugin.

Basically the value of datasets (if given) is JSONified and passed directly to the typeahead plugin. In addition,
a custom JSONifier is used. The JSONifier respects a literal_js marker class that can be used to include
hunks of literal javascript within the datasets parameter.

(A patch to deformdemo with a demo is forthcoming.)

This parameter provides an alternative, more powerful (though hairy)
means of configuring typeahead.js, providing access to the
complete feature set of the plugin.
@mcdonc

mcdonc commented Oct 4, 2013

Copy link
Copy Markdown
Member

I'm going to need to understand this a little better but the type-ahead.com site is down at the moment, so deferring.

@dairiki

dairiki commented Oct 4, 2013

Copy link
Copy Markdown
Contributor Author

The main issue is that for certain useful configurations of typeahead.js one needs to be able to put literal javascript (other than strings and numbers) into the configuration parameter. For an example, see the last demo at http://twitter.github.io/typeahead.js/examples/, which, to support templating of the completion items, requires something like:

$('#myinput').typeahead({
    // [..other stuff...]
   template: '<p><strong>{{value}}</strong> – {{year}}</p>',
   engine: Hogan
})

The patches in this pull request support that configuration via something like:

from defom.widget import literal_js, AutocompleteInputWidget
typeahead_config = {
    # ... other stuff ...
    'template': '<p><strong>{{value}}</strong> – {{year}}</p>',
    'engine': literal_js('Hogan'),
    }
form['myinput'].widget = AutocompleteInputWidget(datasets=typeahead_config)

The literal_js API doesn't particularly give me the warm fuzzies, but I haven't come up with anything better.

I haven't thought about it too hard, but something like this could also probably be used to support hairy configurations for select2 and TinyMCE as well.

@Themanwithoutaplan

Copy link
Copy Markdown
Contributor

The canonical way to do this in HTML 5. AFAIK this can be made to work with a JSON source.

@dairiki

dairiki commented Sep 15, 2015

Copy link
Copy Markdown
Contributor Author

@Themanwithoutaplan Could you elaborate a bit? It's probably that I'm dense, but I'm having trouble making sense of your comment.

@stevepiercy

Copy link
Copy Markdown
Member

@Themanwithoutaplan the implementation of list is lacking. 😞

Meanwhile a typeahead is useful. For a demo of a recent version of typeahead, see https://selectree.calpoly.edu/

@Themanwithoutaplan

Copy link
Copy Markdown
Contributor

@dairiki this can be done natively by the browser using the list attribute with a relevant source. A polyfill could be use to provide backwards compatibility.

@stevepiercy that's a nice widget. Be even nicer if it worked with the datalist element. Otherwise we'll spend most of our time chasing our tails. Native support, the new laggard that is Safari excepted, is pretty good.

@stevepiercy

Copy link
Copy Markdown
Member

@Themanwithoutaplan if by "pretty good" you mean "buggy", then I agree. 😉 Did you see the footnotes for datalist on caniuse? Those are pretty bad.

@Themanwithoutaplan

Copy link
Copy Markdown
Contributor

For deform_bootstrap the PR should be merged but I think a more generic datalist-based approach where the framework does the polyfill should be investigated.

@stevepiercy

Copy link
Copy Markdown
Member

For deform_bootstrap the PR should be merged

@Themanwithoutaplan do you mean this branch deform2? AFAIK, there is no deform_bootstrap.

a more generic datalist-based approach where the framework does the polyfill should be investigated.

I agree with this. Would you create new, separate issue with details?

@tseaver tseaver closed this Sep 15, 2015
@dairiki

dairiki commented Sep 15, 2015

Copy link
Copy Markdown
Contributor Author

As @stevepiercy mentions, typeahead has many more capabilities than (by my understanding, at least) HTML5/datalist: (even if browser support were not an issue) — things like callback/query based completion lists, fancy templatable completion listings.

This PR has to do with introducing a mechanism whereby these advanced features of typeahead may be configured through the deform widget. Stock deform has no trouble using typeahead with static completion lists and default completion formatting. In the context of this PR, whether or not HTML5 should be used for simple autocompleting inputs is a red herring.

@dairiki

dairiki commented Sep 15, 2015

Copy link
Copy Markdown
Contributor Author

@tseaver Reason for closing?

@tisdall

tisdall commented Sep 15, 2015

Copy link
Copy Markdown
Contributor

@dairiki sorry, guys.. I submitted an issue about the deform2 branch being dead and confusing so @tseaver deleted it. Can you resubmit this on the master branch?

@stevepiercy stevepiercy added this to the 3.0.0 milestone Jun 22, 2020
@stevepiercy

Copy link
Copy Markdown
Member

@dairiki I've added this to the Deform 3.0.0 milestone. I'm preparing a release, now that I have PyPI maintainer access. Would you please be so kind to reopen this PR against master? Thank you!

@dairiki

dairiki commented Jun 22, 2020

Copy link
Copy Markdown
Contributor Author

@stevepiercy I do not see a github UI option to re-open this PR. (Perhaps that is because I am not the one who closed it? — that was @tseaver.) I will work on rebasing over the next couple of days. I guess I can just open a new PR if we can't figure out how to re-open this one...

PS: I am no longer using deform in an active project, but I am certainly willing to help get these old PRs merged if they are still pertinent.

@stevepiercy

Copy link
Copy Markdown
Member

@dairiki yeah, there is no option to reopen a PR against a deleted branch, specifically deform2, otherwise I would do it myself. We discovered only after the fact that GitHub has a footgun feature where it permanently closes PRs made to a specific branch when that branch is deleted. 🤦

I would be grateful for you opening the PR, and we can take it from there. I recently discovered that when someone opens a PR against a repo where I have write access, I can push commits to that person's branch in their repo and it updates the PR.

@dairiki

dairiki commented Jun 23, 2020

Copy link
Copy Markdown
Contributor Author

I've rebased my typeahead-datasets branch onto the current master. Unfortunately, there is an issue. I had been relying on a hack to support JSON-esque serialization of values containing literal javascript using json.JSONEncoder from python’s standard library. It seems that my hack is not feasible in any version of python after 2.6 (😮). (My hack involved overriding JSONEncoder._iterencode, which does not exist in python >= 2.7.)

I see two ways forward:

  1. Implement our own serializer (more or less from scratch.)
  2. Find some other external JSON/javascript-serializer that will work for us. (I’m not sure that such a thing exists.)

I’m not sure that either is worth the effort.

Thoughts/Ideas? (Questions?)

@stevepiercy

Copy link
Copy Markdown
Member

Would you please create a new PR with your new branch against master here, and mark it as "Draft"?

Also do you have a link to your hack via json.JSONEncoder you mention?

@stevepiercy

Copy link
Copy Markdown
Member

Also we will support only Python 3.5+ going forward.

Does this thread describe the same issue https://stackoverflow.com/a/53848267/2214933?

Does jsons do what is needed?

@dairiki

dairiki commented Jun 24, 2020

Copy link
Copy Markdown
Contributor Author

@stevepiercy New PR draft created: #413

My hacked up version of JSONEncoder is JSONConfigSerializer in widget.py, which works with the new literal_js marker class which is defined just above it. The two unit tests which are currently failing on #413 are a result of these hacks not working in recent versions of python.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

6 participants